//
// layoutLearn.js：文档页面组件
//

import {
  Layout as LayoutDHX,
  TreeGrid as TreeGridDHX,
} from 'dhx-suite-package';
import $ from 'jquery';
import typeset from '@/utils/globalVariable';
import { marked } from 'marked';
import { Message } from '../message';
import QComposer from '../composer/QComposer';

const LayoutContainer = ({
  // 0. 整体布局（三栏式）
  layoutContainer: null,

  // 1. 左侧列表
  // 1.0. 左侧布局（上下）
  layoutAlg: null,
  // 1.1. 算法列表
  treegridAlgs: null,

  // 2. 中间文档
  layoutDoc: null,

  // 3. 右侧电路
  qcircuit: null,
  // 3.0. 右侧布局
  layoutVisual: null,
  // 3.1. 工具栏
  toolbarCircuit: null,
  // 3.2. 电路可视化
  layoutCircuit: null,
  canvasCircuit: null,

  // ///////////////////////////////////////
  init() {
    // 0. 整体布局（三栏式）///////////////
    this.layoutContainer = this.layoutContainer_create();
    this.layoutContainer_event();

    // 1. 左侧列表 ///////////////
    // 1.0. 左侧布局（上下）
    this.layoutAlg = this.layoutAlg_create();
    // 1.1. 算法列表
    this.treegridAlgs = this.treegridAlgs_create();
    this.treegridAlgs_event();

    // 2. 中间文档 ///////////////
    this.layoutDoc = this.layoutDoc_create();

    // 3. 右侧电路 ///////////////
    this.layoutVisual = QComposer.init();

    // 挂载各组件 /////
    // 1. 左侧列表
    this.layoutContainer.getCell('listContainer').attach(this.layoutAlg);
    this.layoutAlg.getCell('treegridAlgs').attach(this.treegridAlgs);
    // 2. 中间文档
    this.layoutContainer.getCell('docContainer').attach(this.layoutDoc);
    // 3. 右侧电路
    this.layoutContainer.getCell('visualContainer').attach(this.layoutVisual);
    return this.layoutContainer;
  },

  // ///////////////////////////////////////
  // 0. 整体布局
  // ///////////////////////////////////////
  layoutContainer_create() {
    const mylayout = new LayoutDHX(null, {
      type: 'line',
      cols: [
        {
          id: 'listContainer',
          width: '250',
          header: '目录',
          // height: '500px',
          collapsable: true,
          resizable: true,
        }, {
          id: 'docContainer',
          // width: '40%',
          // height: '100%',
          collapsable: false,
          resizable: true,
        }, {
          id: 'visualContainer',
          width: 0,
          collapsable: false,
          resizable: true,
        },
      ],
    });
    return mylayout;
  },
  layoutContainer_event() {
    // const that = this;
    // const myevents = that.layoutContainer.events;
    // myevents.on('afterExpand', (id) => {
    //   if (id == 'listContainer') {
    //   }
    // });
  },
  // ///////////////////////////////////////
  // 1. 左侧列表
  // ///////////////////////////////////////
  // 1.0. 整体布局
  layoutAlg_create() {
    const mylayout = new LayoutDHX(null, {
      type: 'none',
      cols: [{ id: 'treegridAlgs' }],
    });
    return mylayout;
  },
  // 1.1. 算法列表
  treegridAlgs_create() {
    const mytreegrid = new TreeGridDHX(null, {
      sortable: false,
      columns: [{ id: 'name', header: [{ text: '量子计算概论' }], gravity: 1.5 }],
      data: [
        { id: '1-0-intro', name: '引言' },
        { id: '1-1-physics', name: '量子物理特征', parent: '1-0-intro' },
        { id: '1-2-classical', name: '经典计算与量子计算', parent: '1-0-intro' },
        // { id: '1-3-la', name: '线性代数基础', parent: '1-0-intro' },

        { id: '2-0-qc', name: '量子计算数学模型' },
        { id: '2-1-qubit', name: '量子比特及叠加态', parent: '2-0-qc' },
        { id: '2-2-entangle', name: '向量计算与量子纠缠', parent: '2-0-qc' },
        { id: '2-3-measure', name: '量子比特的测量', parent: '2-0-qc' },
        { id: '2-4-gate', name: '量子逻辑门', parent: '2-0-qc' },
        { id: '2-5-circuit', name: '量子线路及性质', parent: '2-0-qc' },

        { id: '3-0-basicalg', name: '量子算法' },
        // { id: '3-1-parity', name: 'Parity问题', parent: '3-0-basicalg' },
        { id: '3-2-DJ', name: 'Deutsch-Jozsa算法', parent: '3-0-basicalg' },
        { id: '3-3-Grover', name: 'Grover算法', parent: '3-0-basicalg' },
        { id: '3-4-Shor', name: 'Shor算法', parent: '3-0-basicalg' },
        { id: '3-5-tele', name: '量子隐形传态', parent: '3-0-basicalg' },
      ],
      selection: 'complex',
      autoWidth: true,
      height: 'content',
    });
    return mytreegrid;
  },
  treegridAlgs_event() {
    const that = this;
    const mytree = this.treegridAlgs;
    const myevents = mytree.selection.events;
    myevents.on('afterSelect', (id) => {
      // console.log(id);
      that.layoutDoc_reload(id.id);
    });
  },
  // ///////////////////////////////////////
  // 2. 中间文档
  // ///////////////////////////////////////
  layoutDoc_create() {
    const mylayout = new LayoutDHX(null, {
      type: 'none',
      cols: [
        {
          id: 'doc',
          padding: 30,
          collapsable: false,
          resizable: false,
          html: '<div id="doc" class="markdown-body"><h3>请选择章节</h3></div>',
        },
      ],
    });
    return mylayout;
  },
  layoutDoc_reload(id) {
    $.get(`/static/documents/${id}.md`).then((data) => {
      const node = document.getElementById('doc');
      node.innerHTML = marked(data);
      typeset(node);
    }).fail(() => {
      Message('文档加载失败');
    });
  },
});

const layoutContainer = LayoutContainer.init();
export default layoutContainer;
